<template>
	<view class="coupon_container box plr_16 fx fx_col pbsafe_56">
		<view class="ptb_23">
			<u-tabs :list="tabsList" lineColor="#F08519" itemStyle="width: 50%;padding: 0;"
				inactiveStyle="color: #999999" lineWidth="66rpx" lineHeight="10rpx" @change="handleChange"></u-tabs>
		</view>
		<view class="fx_1 flow_y">
			<view class="list_item flow_h" v-for="item,index in dataList" :key="index">
				<Coupon :data="item" @select="handleHome" />
			</view>
			<view class="ptb_16" v-if="dataList.length">
				<u-loadmore :status="loadingStatus" />
			</view>
			<view class="mt_32" v-if="!dataList.length&&!loading">
				<Empty title="暂无优惠券" />
			</view>
		</view>
		<view class="pf b_0 l_0 r_0 pbsafe_8 pt_8 plr_8 bc_fff" v-if="params.status == 2">
			<button class="custom_btn primary lh_40 fz_14 br_40" @click="handleClear">一键清空</button>
		</view>
	</view>
</template>

<script>
	import Empty from '@/components/Empty.vue'
	import Coupon from '@/components/order/Coupon.vue'
	import dataMixin from '@/mixins/data.js'
	import api from '@/service/config/api.js'
	export default {
		mixins: [dataMixin],
		components: {
			Empty,
			Coupon
		},
		data() {
			return {
				popVisible: false,
				tabsList: [{
					name: '未使用',
					status: 1
				}, {
					name: '已使用/已过期',
					status: 2
				}],
				listUrl: '/marketing/applet/api/user/discount_coupon/my/receive',
				params: {
					status: 1,
					dealerId: this.$store.state.functionRange
				},
				dataList: [],
			}
		},
		onShow() {
			this.getData(true)
		},
		methods: {
			handleChange({
				status
			}) {
				this.$set(this.params, 'status', status)
				this.getData(true)
			},
			handleClear() {
				this.$utils.loading()
				api.post('/marketing/applet/api/user/discount_coupon/my/clear?dealerId='+this.$store.state.functionRange).then(() => {
					this.$utils.showToast('清理成功')
					this.getData(true)
				})
			},
			handleHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	@include color_page;
</style>

<style lang="scss" scoped>
	.coupon_container {
		.list_item+.list_item {
			margin-top: 24rpx;
		}
	}
</style>